<template>
	<view class="index-tab2-view">
		<view class="index-bg-color"></view>
		<view class="good-project-box">
			<view class="fx-center-between good-project-top">
				<view class="title">精选项目</view>
				<view class="look-more" @click="toGoodProject">
					查看全部 <van-icon name="arrow" color="#594017" size="22rpx"></van-icon>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x>
				<view class="good-project-list fx-center">
					<view class="good-project-item fx-center-between" v-for="(item,index) in goodProjectArr"
						:key="item.id" @click="toDetail(item.id)">
						<view class="project-left">
							<view class="project-name">{{item.name}}</view>
							<view class="fx-center">

								<view class="main-tag-item main-tag-color2" v-if="item.fee_mode===1">
									{{item.fee_mode_name}}
								</view>
								<view class="main-tag-item main-tag-color3" v-else>{{item.fee_mode_name}}
								</view>
								<view class="main-tag-item main-tag-color1" v-for="tag in item.tags" :key="tag.id">
									{{tag.name}}
								</view>
								<!-- <van-tag color="rgba(1, 183, 108, 0.1)" text-color="#01B76C" size="mini">
									{{item.fee_mode_name}}
								</van-tag> -->
								<!-- <van-tag size="mini" v-for="tag in item.tags" :key="tag" color="#F6F6F6"
									text-color="#5C5F66" style="margin-left: 8rpx;">{{tag.name}}</van-tag> -->
							</view>
							<view class="project-desc">{{item.summary}}</view>
						</view>
						<image :src="item.cover_url" mode="aspectFill" class="project-img"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="other-project-list" v-for="item in list" :key="item.id">
			<project-item :info="item"></project-item>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			goodProjectArr: {
				typeof: Array,
				default: () => []
			},
			list: {
				typeof: Array,
				default: () => []
			}
		},
		data() {
			return {
				projectArr: []
			};
		},
		methods: {
			initData(info) {
				// this.projectArr = info.suggest_projects
			},

			toGoodProject() {
				uni.navigateTo({
					url: '/pages/index/goodProject/goodProject'
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/index/projectDetail/projectDetail?id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.index-tab2-view {
		padding: 20rpx 24rpx 0;

		.index-bg-color {
			background: linear-gradient(180deg, #FFFFFF 84%, rgba(255, 255, 255, 0) 100%);
			width: 100%;
			height: 500rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			z-index: -1;
		}

		.good-project-box {
			background: linear-gradient(270deg, #FEE0BA 0%, #FFE7C8 100%);
			border-radius: 4rpx;
			padding: 20rpx 16rpx 16rpx;


			.good-project-top {
				font-size: 26rpx;
				margin-bottom: 18rpx;

				.title {
					font-size: 32rpx;
					color: #594017;
					font-weight: bold;
				}

				.look-more {
					opacity: 0.8;
					color: #594017;
				}
			}
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;

			.good-project-list {}

			.good-project-item {
				width: 512rpx;
				height: 136rpx;
				padding: 24rpx;
				background: #fff;
				border-radius: 4rpx;
				margin-right: 16rpx;

				.project-left {
					width: 350rpx;
					height: 136rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.project-name {
						font-size: 30rpx;
						font-weight: bold;
						color: #161616;
						min-width: 0;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.project-desc {
						min-width: 0;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						color: #161616;
						font-size: 26rpx;
					}
				}


				.project-img {
					width: 136rpx;
					height: 136rpx;
					margin-left: 36rpx;
					flex-shrink: 0;
					border-radius: 4rpx;
				}
			}
		}

		.other-project-list {
			margin-top: 16rpx;
		}
	}

	scroll-view ::-webkit-scrollbar {
		width: 0;
	}
</style>